<template>
    <div class="addoneRecord">
        <el-dialog v-model="open" width="78%" align="left" @close="closeinfo"
            style="position: relative;background-color: #f1f1f1;" draggable>
            <div class="mb-20 f20">
                <p>Add one Record</p>
            </div>
            <div class="box flex aic">
                <div class="amount">
                    <span>Amount:</span>
                    <el-input v-model="payAdd.amount" @input="(val) => { emits('inputAmount', val) }" style="width:58%;"
                        placeholder="Amount" />
                </div>

                <div class="sitem ml-20">
                    <span>Sales:</span>
                    <el-select v-model="payAdd.sales" @change="() => { emits('getAddList') }" :remote-method="getSales"
                        remote remote-show-suffix filterable class="m-2" placeholder="Enter sales name" style="width: 84%;">
                        <el-option v-for="item in saleList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </div>
                <div class="item ml-20">
                    <span>Country:</span>
                    <el-select @focus="() => { emits('getCountry') }" :remote-method="(val) => { emits('getCountry', val) }"
                        remote remote-show-suffix v-model="payAdd.country" filterable class="m-2"
                        placeholder="Enter country name" style="width: 79%;">
                        <el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="item ml-20">
                    <span>Current:</span>
                    <el-select v-model="payAdd.currency" class="m-2" placeholder="Currency type" style="width: 80%;">
                        <el-option v-for="item in currency" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="sitem ml-20">
                    <span>Rate:</span>
                    <el-input v-model="payAdd.rate" style="width: 86%;" placeholder="Currency exchange rate" />
                </div>
                <div class="amount ml-20">
                </div>
                <div class="amount mt-5">
                    <span>Fee:</span>
                    <el-input v-model="payAdd.fee" @input="(val) => { emits('inputFee', val) }" style="width:78%;"
                        placeholder="Fee" />
                </div>
                <div class="item1 ml-20 mt-5">
                    <span>PaymentWay:</span>
                    <el-select v-model="payAdd.paymentWay" class="m-2" placeholder="Option of payment" style="width: 70%;">
                        <el-option v-for="item in bankTypeList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="select ml-20 mt-5">
                    <el-select v-model="payAdd.bankID" class="m-2" placeholder="Select bank">
                        <el-option v-for="item in paybankList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="sitem ml-20 mt-5">
                    <span>Time:</span>
                    <el-date-picker v-model="payAdd.date" @change="() => { emits('getPicker', payAdd.date) }"
                        type="datetime" placeholder="Select date and time" style="width: 85%;" />
                </div>
                <div class="select ml-20 mt-5">
                    <el-select v-model="payAdd.paytype" class="m-2" placeholder="Selection type">
                        <el-option v-for="item in payTypeList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
            </div>
            <div class="choose mt-10 mb-10 flex aic">
                <div class="item">
                    <span>Stime:</span>
                    <el-date-picker v-model="date" @change="() => { emits('dategetAddList', date) }" style="width:89%"
                        type="daterange" range-separator="-" unlink-panels start-placeholder="Start date"
                        end-placeholder="End date" />
                </div>
                <div class="sitem ml-20">
                    <span>Seach:</span>
                    <el-input v-model="PI_name" @input="() => { emits('seachName', PI_name) }" clearable style="width:84%;"
                        class="m-2" placeholder="Enter the order name" :suffix-icon="Search" />
                </div>
                <div class="select ml-20">
                    <el-select v-model="country" @change="() => { emits('changecountry', country) }"
                        @focus="() => { emits('getCountry') }" :remote-method="(val) => { emits('getCountry', val) }" remote
                        remote-show-suffix clearable filterable class="m-2" placeholder="Enter country name">
                        <el-option v-for="item in countryList" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div class="select ml-20">
                    <el-select v-model="user" @focus="() => { emits('getUser') }"
                        @change="() => { emits('changUser', user) }" :remote-method="(val) => { emits('getUser', val) }"
                        remote remote-show-suffix filterable clearable class="m-2" placeholder="Select customer">
                        <el-option v-for="item in userList" :key="item.customer_info_id" :label="item.firstname"
                            :value="item.customer_info_id" />
                    </el-select>
                </div>
            </div>
            <div class="tablist flex jc-sb">
                <div class="item">
                    <el-table :data="addList" v-el-table-infinite-scroll="getAddList1"
                        @selection-change="(val) => { emits('selectList', val) }"
                        style="width: 100%;border-radius: 10px;height: 100%;">
                        <el-table-column type="selection" width="30" />
                        <el-table-column prop="PI_name" label="PI_name" />
                        <el-table-column prop="firstname" label="Contact" />
                        <!-- <el-table-column prop="State" label="State" /> -->
                        <el-table-column prop="name" label="Country" />
                        <el-table-column prop="amount" label="Amount" />
                    </el-table>
                </div>
                <div class="item">
                    <el-table :data="rightList" style="width: 100%;border-radius: 10px;height: 100%;">
                        <el-table-column prop="PI_name" label="PI_name" width="150" />
                        <el-table-column prop="firstname" label="Contact" width="200" />
                        <el-table-column prop="amount" label="Amount" />
                        <el-table-column prop="" label="Paied" width="100">
                            <template v-slot="Number">
                                <el-input v-model="Number.row.inputNumber"
                                    @input="() => { emits('itemInpuAmount', Number) }" style="width:100%;" />
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="Country" />
                        <el-table-column fixed="right" label="Actions" width="150">
                            <template v-slot="operation">
                                <el-button @click="() => { emits('del', operation) }"
                                    style="width: 60%;background-color:#6193D2;color: #fff;border: none;"
                                    type="danger">Delete</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="bottom mt-10 flex jc-sb">
                <div class="item">
                    <el-input v-model="payAdd.remarks" maxlength="300" placeholder="remarks" show-word-limit
                        type="textarea" />
                </div>
                <div class="item">
                    <div class="sett flex aic">
                        <div class="mr-20">
                            <span>合计:</span>
                            <el-input v-model="payAdd.total" style=" width:120px;" />
                        </div>
                        <div>
                            <span>结余:</span>
                            <el-input v-model="payAdd.balance" style=" width:120px;" />
                        </div>
                    </div>
                    <div class="sett flex aic mt-10">
                        <el-button type="primary" @click="() => { emits('addSave') }"
                            style="border:1px solid #6193D2;color:#ffffff;width:80px;">Save</el-button>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
  
<script  setup>
import { ref } from "vue"
import { Search } from '@element-plus/icons-vue'

const props = defineProps({
    rightList: Object,
    payAdd: Object,
    userList: Object,
    addList: Object,
    saleList: Object,
    bankTypeList: Object,
    currency: Object,
    payTypeList: Object,
    countryList: Object,
    paybankList: Object
})
const emits = defineEmits(['getSales', 'getCountry', 'getPicker', 'dategetAddList', 'seachName', 'changecountry', 'getUser', 'changUser', 'selectList', 'inputFee', 'inputAmount', 'itemInpuAmount', 'del', 'addSave', 'getAddList', 'getAddList1'])
const getSales = (val) => {
    emits('getSales', val)
}
const getAddList1 = () => {
    emits('getAddList1')
}
const closeinfo = () => {
    date.value = ''
    PI_name.value = ''
    country.value = ''
    user.value = ''
}
const open = ref(false)
// 搜索变量
const date = ref([])
const PI_name = ref('')
const country = ref('')
const user = ref('')
defineExpose({
    open
})
</script>
<style lang="less" scoped>
.addoneRecord {
    .select {
        width: 200px;
    }

    .box {
        flex-wrap: wrap;


        .amount {
            width: 138px;
        }

        .sitem {
            width: 260px;
        }

        .item {
            width: 280px;
        }

        .item1 {
            width: 316px;
        }

        .capitalpool {
            width: 700px;
        }
    }



    .choose {
        border: 1px solid #ffffff;
        padding: 5px;

        .item {
            width: 390px;
        }

        .sitem {
            width: 300px;
        }
    }

    .tablist {
        height: 40vh;

        .item {
            width: 49.5%;
            height: 100%;
            border-radius: 10px;
        }
    }


    .bottom {
        .item {
            width: 50%;
            height: 8vh;
        }

        .sett {
            justify-content: flex-end;
        }
    }

    .el-textarea__inner {
        height: 8vh !important;
    }

    .el-dialog__body {
        padding-top: 5px;
    }

    .el-dialog__title {
        font-weight: bold;
        font-family: swis;
        font-size: 20px;
    }
}
</style>